<template>
  <div>
    <n-form
      :label-width="180"
      :model="formValue"
      :rules="rules"
      label-placement="left"
      ref="formRef"
      class="py-8"
    >
      <n-card :bordered="false" class="proCard">
        <n-grid cols="3" responsive="screen">
          <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
            <n-form-item label="项目名称" path="name">
              <n-input v-model:value="formValue.name" placeholder="项目名称" />
            </n-form-item>
            <n-form-item label="项目编号" path="number">
              <n-input placeholder="项目编号" v-model:value="formValue.number" />
            </n-form-item>
            <n-form-item label="合同名称" path="contract_name">
              <n-input v-model:value="formValue.contract_name" placeholder="合同名称" />
            </n-form-item>
            <n-form-item label="合同编号" path="contract_number">
              <n-input placeholder="合同编号" v-model:value="formValue.contract_number" />
            </n-form-item>
            <n-form-item label="内部合同编号" path="internal_contract_number">
              <n-input
                v-model:value="formValue.internal_contract_number"
                placeholder="内部合同编号"
              />
            </n-form-item>
            <n-form-item label="立项名称" path="item_name">
              <n-input placeholder="立项名称" v-model:value="formValue.item_name" />
            </n-form-item>
            <n-form-item label="立项编号" path="item_number">
              <n-input placeholder="立项编号" v-model:value="formValue.item_number" />
            </n-form-item>
          </n-grid-item>
          <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
            <n-form-item label="税率" path="tax_rate">
              <n-select v-model:value="formValue.tax_rate" :options="tax_rate" />
            </n-form-item>
            <n-form-item label="合同开工日期" path="start_date">
              <n-date-picker type="date" v-model:value="formValue.start_date" style="width: 100%" />
            </n-form-item>
            <n-form-item label="合同竣工日期" path="end_date">
              <n-date-picker type="date" v-model:value="formValue.end_date" style="width: 100%" />
            </n-form-item>
            <n-form-item label="项目负责人" path="director">
              <n-input placeholder="项目负责人" v-model:value="formValue.director" />
            </n-form-item>
            <n-form-item label="是否抢工" path="is_rush">
              <n-radio-group v-model:value="formValue.is_rush" name="is_rush">
                <n-space>
                  <n-radio :value="1">是</n-radio>
                  <n-radio :value="2">否</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item label="是否样板房" path="is_model_houses">
              <n-radio-group v-model:value="formValue.is_model_houses" name="is_model_houses">
                <n-space>
                  <n-radio :value="1">是</n-radio>
                  <n-radio :value="2">否</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
          </n-grid-item>
          <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
            <n-form-item label="经营类型" path="business_type">
              <n-input placeholder="经营类型" v-model:value="formValue.business_type" />
            </n-form-item>
            <n-form-item label="合同总金额" path="price">
              <n-input-number
                v-model:value="formValue.price"
                clearable
                :precision="2"
                style="width: 100%"
              />
            </n-form-item>
            <n-form-item label="计税方式" path="taxation_method">
              <n-input placeholder="计税方式" v-model:value="formValue.taxation_method" />
            </n-form-item>
            <n-form-item label="建设单位" path="construction_unit">
              <n-input placeholder="建设单位" v-model:value="formValue.construction_unit" />
            </n-form-item>
            <n-form-item label="是否报奖" path="is_award_presentation">
              <n-radio-group
                v-model:value="formValue.is_award_presentation"
                name="is_award_presentation"
              >
                <n-space>
                  <n-radio :value="1">是</n-radio>
                  <n-radio :value="2">否</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
          </n-grid-item>
        </n-grid>
      </n-card>
      <n-form-item label="工程地址" path="address">
        <n-input placeholder="工程地址" v-model:value="formValue.address" type="textarea" />
      </n-form-item>
      <n-form-item label="施工内容" path="construction_content">
        <n-input
          placeholder="施工内容"
          v-model:value="formValue.construction_content"
          type="textarea"
        />
      </n-form-item>
      <n-form-item label="质量要求" path="quality_requirement">
        <n-input
          placeholder="质量要求"
          v-model:value="formValue.quality_requirement"
          type="textarea"
        />
      </n-form-item>
      <n-form-item label="工期风险描述" path="risk">
        <n-input placeholder="工期风险描述" v-model:value="formValue.risk" type="textarea" />
      </n-form-item>
      <n-form-item label="备注" path="remarks">
        <n-input v-model:value="formValue.remarks" type="textarea" placeholder="请输入备注" />
      </n-form-item>
    </n-form>
    <n-space justify="center">
      <n-button type="warning" :loading="loadings" @click="formSubmit">存草稿</n-button>
      <n-button type="primary" :loading="loadings" @click="formSubmit">提交</n-button>
      <n-button type="warning" @click="resetForm">重置</n-button>
      <n-button @click="router.go(-1)">返回</n-button>
    </n-space>
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref, reactive, onMounted } from 'vue';
  import { useMessage } from 'naive-ui';
  import { getProject, patchProject, putProject } from '@/api/project/project';
  import { ResultEnum } from '@/enums/httpEnum';
  import { useRouter } from 'vue-router';
  import router from '@/router';
  const id: any = ref(useRouter().currentRoute.value.params.id);
  const loadings = ref(false);
  const rules = {
    name: {
      required: true,
      message: '请输入项目名称',
      trigger: 'blur',
    },
    item_name: {
      required: true,
      message: '请输入立项名称',
      trigger: 'blur',
    },
    item_number: {
      required: true,
      message: '请输入立项编号',
      trigger: ['input'],
    },
  };

  const tax_rate: any = ref([
    { label: '1%', value: 1 },
    { label: '3%', value: 3 },
    { label: '4%', value: 6 },
    { label: '9%', value: 7 },
    { label: '13%', value: 13 },
  ]);
  const formRef: any = ref(null);
  const message = useMessage();

  const defaultValueRef = () => ({
    id: 0,
    name: '',
    number: '',
    contract_name: '',
    contract_number: '',
    internal_contract_number: '',
    item_name: '',
    item_number: '',
    director: '',
    tax_rate: '',
    address: '',
    construction_content: '',
    is_rush: 0,
    is_model_houses: 0,
    construction_unit: '',
    business_type: '',
    price: 0,
    taxation_method: '',
    quality_requirement: '',
    risk: '',
    is_award_presentation: 0,
    remarks: '',
    start_date: null,
    end_date: null,
  });

  let formValue = reactive(defaultValueRef());

  const getData = async () => {
    const response: any = await getProject(formValue.id);
    if (response.code === ResultEnum.SUCCESS) {
      response.data.price = parseFloat(response.data.price);
      Object.assign(formValue, response.data);
    }
  };

  function formSubmit() {
    formRef.value.validate(async (errors) => {
      if (!errors) {
        let response: any = null;
        if (formValue.id == 0) {
          response = await putProject(formValue);
        } else {
          response = await patchProject(formValue);
        }
        loadings.value = true;
        if (response.code == ResultEnum.SUCCESS) {
          loadings.value = false;
          message.success('操作成功');
          formValue.id = response.data;
          getData();
          return;
        }
        message.error(response.message);
      } else {
        message.error('验证失败，请填写完整信息');
      }
    });
  }

  function resetForm() {
    formRef.value.restoreValidation();
    formValue = Object.assign(unref(formValue), defaultValueRef());
  }

  onMounted(() => {
    formValue.id = id.value;
    if (formValue.id != 0) {
      getData();
    }
  });
</script>
